<template>
    <div>
      <canvas ref="canvas" :width="width" :height="height" style="border: 1px solid blue;background-image: url(/src/assets/station_images/a.png);background-size: contain;"></canvas>
    </div>
  </template>
   
  <script>
  export default {
    props: {
      width: {
        type: Number,
        default: 1206
      },
      height: {
        type: Number,
        default: 669
      },
      x: {
        type: Number,
        default:10,
        required: true
      },
      y: {
        type: Number,
        default:10,
        required: true
      },
      radius: {
        type: Number,
        default:10,
        required: true
      },
      color: {
        type: String,
        default: 'red'
      }
    },
    mounted() {
      this.drawCircle(this.x, this.y, this.radius, this.color);
      this.drawCircle(205, 100, this.radius, this.color);
      this.drawCircle(257, 100, this.radius, this.color);
    },
    methods: {
      drawCircle(x, y, radius, color) {
        const canvas = this.$refs.canvas;
        const ctx = canvas.getContext('2d');
   
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fillStyle = color;
        ctx.fill();
      }
    }
  };
  </script>